import { useContext, useRef } from 'react'
import type { PopModelProps } from '../../ListType'
import './PopModelStyle.css'
import context from '../../context/Context'

function PopModel (props: PopModelProps) {

  // #region 变量声明
  const formRef = useRef<HTMLFormElement | null>(null) // 表单元素
  const { state } = useContext(context)

  // #endregion

  // #region 函数
  // 点击mark关闭弹窗
  function closePop (e: React.MouseEvent) {
    if ((e.target as HTMLDivElement).classList.contains('mark')) props.close()
  }
  // 点击确认提交事件
  function submit () {
    if (props.popType) {
      // 编辑用户
      editUser()
    } else {
      // 添加用户
      createUser()
    }
  }
  // 编辑用户
  function editUser () {

  }
  // 添加用户
  function createUser () {

  }
  // #endregion

  // #region Hooks

  // #endregion

  return (
    <div className="mark" onClick={ closePop }>
      <div className="box">
        <h2 onClick={ () => console.log(state.edit) }>{ props.popType ? '编辑用户' : '添加用户' }</h2>
        <form ref={ formRef }>
          <div className="form_item">
            <label htmlFor="username">用户名:</label>
            <input type="text" name='username' defaultValue={ state.edit.username } autoComplete='autoComplete' />
          </div>
          <div className="form_item">
            <label htmlFor="password">密码:</label>
            <input type="text" id='password' defaultValue={ state.edit.password } autoComplete='autoComplete' />
          </div>
          <div className="form_item">
            <label htmlFor="age">年龄:</label>
            <input type="number" name='age' defaultValue={ state.edit.age } autoComplete='autoComplete' />
          </div>
          <div className="form_item">
            <label htmlFor="sex">性别:</label>
            <select name='sex' autoComplete='autoComplete' defaultValue={ state.edit.sex }>
              <option value="">请选择</option>
              <option value={ 0 }>男</option>
              <option value={ 1 }>女</option>
            </select>
          </div>
          <div className="form_item">
            <label htmlFor="email">邮箱:</label>
            <input type="email" name='email' defaultValue={ state.edit.email } autoComplete='autoComplete' />
          </div>
          <div className="form_item btn">
            <button type='button' onClick={ submit }>确认</button>
            <button type='button' onClick={ props.close }>取消</button>
          </div>
        </form>
      </div>
    </div>
  )
}

export default PopModel
